<template xmlns:background-color="http://www.w3.org/1999/xhtml">
  <!--文件管理-文件查看-本部门 @click="Onfile"-->
  <a-row>
    <a-col :span="5" style="margin-right: 10px">
      <a-card :bordered="false">
        <a-form-model ref="form" :model="model" :rules="validatorRules">
          <span style="font-size:18px;font-weight:bold">文件目录:</span>
          <a-tree multiple @select="onSelect1" @check="onCheck" @rightClick="rightHandle" :selectedKeys="selectedKeys"
            :checkedKeys="checkedKeys" :treeData="treeData1" :checkStrictly="checkStrictly"
            :expandedKeys="iExpandedKeys" :autoExpandParent="autoExpandParent" @expand="onExpand" />
        </a-form-model>
      </a-card>
    </a-col>
    <a-col :span="18">
      <a-dropdown :trigger="['contextmenu']">
        <a-card :bordered="false" v-if="selectedKeys1 && selectedKeys1.length > 0">
          <a-button type="primary" @click="handleAdd">上传文件</a-button>

          <a-table ref="table" :pagination="ipagination" :columns="columns" :dataSource="data1">
            <template slot="action" slot-scope="text, record">
              <a type="primary" @click="downloadFile(record)" icon="download">下载文件</a>
              <a type="primary"><file-preview :file="record" txt="查看文件"></file-preview></a>
              <a @click="handleDelete(record)">删除文件</a>
            </template>
          </a-table>

        </a-card>
        <a-card v-else class="span2">
          <a-empty>
            <span slot="description"> 请先选择一个文件夹!</span>
          </a-empty>
        </a-card>
        <a-menu slot="overlay">
        </a-menu>
      </a-dropdown>
    </a-col>
    <depart-modal ref="departModal" @ok="loadTree"></depart-modal>
  </a-row>
</template>
<script>
  import DepartModal from './modules/DirectoryFileModal'
  import UploadFile from './UploadFile.vue'
  import {
    queryDepartTreeList,
    getFileDirectory,
    searchByKeywords,
    deleteByDirectoryId
  } from '@/api/api'
  import {
    getFileAccessHttpUrl
  } from '@/api/manage'
  import {
    mapGetters
  } from 'vuex'

  import {
    httpAction,
    deleteAction,
    getAction
  } from '@/api/manage'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import Vue from 'vue'
  export default {
    name: 'DepartList',
    mixins: [JeecgListMixin],
    components: {
      DepartModal,
      UploadFile,
    },
    data() {
      return {
        ipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        previewVisible: false,
        previewFile: '',
        iExpandedKeys: [],
        pagination: {},
        rowKey: '',
        directoryIds: '',
        loading: false,
        autoExpandParent: true,
        currFlowId: '',
        currFlowName: '',
        disable: true,
        // treeData: treeData,
        treeData1: [],
        visible: false,

        departTree: [],
        rightClickSelectedKey: '',
        rightClickSelectedOrgCode: '',
        hiding: true,
        model: {},
        dropTrigger: '',
        depart: {},
        columns: [{
            title: '文件名',
            dataIndex: 'name',
            key: 'name',
          },
          {
            title: '上传人',
            dataIndex: 'createBy',
            key: 'createBy',
          },
          {
            title: '上传时间',
            dataIndex: 'createTime',
            key: 'createTime',
          },
          {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            align: 'center',
            scopedSlots: {
              customRender: 'action'
            },
          },
        ],
        data1: [],
        fileList: [],
        disableSubmit: false,
        checkedKeys: [],
        selectedKeys: [],
        selectedKeys1: [],
        autoIncr: 1,
        currSelected: {},
        allTreeKeys: [],
        checkStrictly: true,
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          },
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          },
        },
        graphDatasource: {
          nodes: [],
          edges: [],
        },
        validatorRules: {
          departName: [{
            required: true,
            message: '请输入机构/部门名称!'
          }],
          orgCode: [{
            required: true,
            message: '请输入机构编码!'
          }],
          orgCategory: [{
            required: true,
            message: '请输入机构类型!'
          }],
          mobile: Vue.prototype.rules.mobile2,
        },
        url: {
          list: '/system/sysOrgFile/querySysOrgFileList'
        },
        queryParam: {
          id: '',
        },
        orgCategoryDisabled: false,
        oldDirectorUserIds: '',
        departNameid: ''
      }
    },
    computed: {
      // importExcelUrl: function () {
      //   return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      // }
      ...mapGetters(["departnameid"]),
      departnameid() {
        return this.$store.getters['departnameid']
      }
    },
    mounted() {
      //  console.log('gds',record.id);
      this.loadTree()
    },
    methods: {
      handlePreview(record) {
        // console.log('dreswa');
        if (record && record.fileUrl) {
          let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + encodeURIComponent(record.fileUrl)
          window.open(url, '_blank')
        }

      },
      downloadFile(record) {
        // console.log('gds',record);
        if (!record) {
          this.$message.warning("未知的文件")
          return;
        }
        // if(record.indexOf(",")>0){
        //   record = text.substring(0,text.indexOf(","))
        // }
        let url = getFileAccessHttpUrl(record.fileUrl)
        window.open(url);
      },

      loadTree() {
        var that = this
        that.treeData1 = []
        getAction('/system/sysOrgFile/querySysOrgFileList').then((res) => {
          if (res.success) {
            for (let i = 0; i < res.result.length; i++) {
              let temp = res.result[i]
              that.treeData1.push(temp)
              that.setThisExpandedKeys(temp)
            }
            this.loading = false
          }
        })
        this.data1 = []
        getAction(`/system/sysOrgFileDetail/queryList?orgFileId=${this.directoryIds}&departType=${1}`).then((res) => {
          if (res.success) {
            let datalist = res.result;
            if (datalist && datalist.length > 0) {
              this.data1 = datalist.map(ite => ({
                ...ite,
                key: ite.id
              }))
            }
          }
        })
      },

      setThisExpandedKeys(node) {
        if (node.children && node.children.length > 0) {
          this.iExpandedKeys.push(node.key)

          for (let a = 0; a < node.children.length; a++) {
            this.setThisExpandedKeys(node.children[a])
          }
        }
      },
      // refresh() {
      //   this.loading = true
      //   this.loadTree()
      // },
      // 右键操作方法
      rightHandle(node) {
        console.log('rightHandle', node)
        this.dropTrigger = 'contextmenu'
        this.rightClickSelectedKey = node.node.eventKey
        this.rightClickSelectedOrgCode = node.node.dataRef.orgCode
      },
      onExpand(expandedKeys) {
        console.log('onExpand', expandedKeys)
        this.iExpandedKeys = expandedKeys
        this.autoExpandParent = false
      },

      backFlowList() {
        this.$router.back(-1)
      },
      // 右键点击下拉框改变事件
      dropStatus(visible) {
        if (visible == false) {
          this.dropTrigger = ''
        }
      },
      // 右键下拉关闭下拉框
      closeDrop() {
        this.dropTrigger = ''
      },
      addRootNode() {
        this.$refs.nodeModal.add(this.currFlowId, '')
      },
      batchDel: function() {
        // console.log(this.checkedKeys)
        if (this.checkedKeys.length <= 0) {
          this.$message.warning('请选择一条记录！')
        } else {
          var ids = ''
          for (var a = 0; a < this.checkedKeys.length; a++) {
            ids += this.checkedKeys[a] + ','
          }
          var that = this
          this.$confirm({
            title: '确认删除',
            content: '确定要删除所选中的 ' + this.checkedKeys.length + ' 条数据，以及子节点数据吗?',
            onOk: function() {
              deleteAction(that.url.deleteBatch, {
                ids: ids
              }).then((res) => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.loadTree()
                } else {
                  that.$message.warning(res.message)
                }
              })
            },
          })
        }
      },
      onSearch(value) {
        let that = this
        if (value) {
          searchByKeywords({
            keyWord: value
          }).then((res) => {
            if (res.success) {
              that.departTree = []
              for (let i = 0; i < res.result.length; i++) {
                let temp = res.result[i]
                that.departTree.push(temp)
              }
            } else {
              that.$message.warning(res.message)
            }
          })
        } else {
          that.loadTree()
        }
      },
      nodeModalOk() {
        this.loadTree()
      },
      nodeModalClose() {},
      hide() {
        // console.log(111)
        this.visible = false
      },
      onCheck(checkedKeys, info) {
        console.log('check', checkedKeys, info)
        this.hiding = false
        //---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------
        if (this.checkStrictly) {
          this.checkedKeys = checkedKeys.checked
        } else {
          this.checkedKeys = checkedKeys
        }
        //---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------
      },
      onSelect(selectedKeys, e) {
        //   console.log('selected', selectedKeys, e)
        //   this.hiding = false
        let record = e.node.dataRef
        //   console.log('onSelect-record', record)
        this.currSelected = Object.assign({}, record)
        this.model = this.currSelected
        this.selectedKeys = [record.key]
        this.model.parentId = record.parentId
        this.setValuesToForm(record)
        //   this.$refs.departAuth.show(record.id);
        this.oldDirectorUserIds = record.directorUserIds

        //update-beign-author:taoyan date:20220316 for: VUEN-329【bug】为什么不是失去焦点的时候，触发手机号校验
        //   this.$nextTick(()=>{
        //     this.$refs.form.validateField('mobile')
        //   })
        //update-end-author:taoyan date:20220316 for: VUEN-329【bug】为什么不是失去焦点的时候，触发手机号校验
      },
      onSelect1(selectedKeys1, z) {
        console.log('select', selectedKeys1, z);
        this.hiding = false;
        let record = z.node.dataRef;
        this.currSelected = Object.assign({}, record);
        this.model1 = this.currSelected;
        this.selectedKeys1 = [record.key];
        this.model1.parentId = record.parentId;
        this.setValuesToForm(record);
        this.directoryIds = record.id;
        this.oldDirectorUserIds = record.directorUserIds;
        getAction(`/system/sysOrgFileDetail/queryList?orgFileId=${this.directoryIds}&departType=${1}`).then((res) => {
          if (res.success) {
            this.data1 = [];
            let datalist = res.result;
            if (datalist && datalist.length > 0) {
              this.data1 = datalist.map(ite => ({
                ...ite,
                key: ite.id
              }))
            }
            this.loading = false
          }
        })
        console.log(222, this.data1)
      },
      // 触发onSelect事件时,为部门树右侧的form表单赋值
      setValuesToForm(record) {
        //   if(record.orgCategory == '1'){
        //     this.orgCategoryDisabled = true;
        //   }else{
        //     this.orgCategoryDisabled = false;
        //   }
      },
      getCurrSelectedTitle() {
        return !this.currSelected.title ? '' : this.currSelected.title
      },
      onClearSelected() {
        this.hiding = true
        this.checkedKeys = []
        this.currSelected = {}
        this.selectedKeys = []
        this.$refs.departAuth.departId = ''
      },
      handleNodeTypeChange(val) {
        this.currSelected.nodeType = val
      },
      notifyTriggerTypeChange(value) {
        this.currSelected.notifyTriggerType = value
      },
      receiptTriggerTypeChange(value) {
        this.currSelected.receiptTriggerType = value
      },
      // submitCurrForm() {
      //   this.$refs.form.validate(valid => {
      //     if (valid) {
      //       if (!this.currSelected.id) {
      //         this.$message.warning('请点击选择要修改部门!')
      //         return
      //       }

      //       //update-begin---author:wangshuai ---date:20200308  for：[JTC-119]在部门管理菜单下设置部门负责人
      //       this.currSelected.oldDirectorUserIds = this.oldDirectorUserIds
      //       //update-end---author:wangshuai ---date:20200308  for：[JTC-119]在部门管理菜单下设置部门负责人

      //       httpAction(this.url.edit, this.currSelected, 'put').then((res) => {
      //         if (res.success) {
      //           this.$message.success('保存成功!')
      //           this.loadTree()
      //         } else {
      //           this.$message.error(res.message)
      //         }
      //       })
      //     }
      //   })
      // },
      // emptyCurrForm() {
      //   this.$refs.form.resetFields();
      //   this.model={}
      // },
      // nodeSettingFormSubmit() {
      //   this.$refs.form.validate(valid => {
      //     if (valid) {
      //       console.log('Received values of form: ', this.model)
      //     }
      //   })
      // },
      // openSelect() {
      //   this.$refs.sysDirectiveModal.show()
      // },
      handleAdd() {
        this.$refs.departModal.add(this.directoryIds)
        //  this.$refs.uploadfile.handlePathChange(record)
      },

      handleDelete(record) {
        // console.log('vbdf',this.directoryIds);
        let ids = record.id
        var that = this
        this.$confirm({
          title: '确认删除',
          content: '确定要删除此文件吗?',
          onOk: function() {
            deleteByDirectoryId({
              id: ids
            }).then((res) => {
              if (res.success) {
                //删除成功后，去除已选中中的数据
                that.checkedKeys.splice(that.checkedKeys.findIndex((key) => key === ids))
                that.$message.success('删除成功!')
                that.loadTree();
                that.show1 = true
                that.show = false
                //删除后同步清空右侧基本信息内容
                let orgCode = that.model.orgCode
                if (orgCode && orgCode === that.rightClickSelectedOrgCode) {
                  that.onClearSelected()
                }
              } else {
                that.$message.warning('删除失败!')
              }
            })
          },
        })
      },
      // selectDirectiveOk(record) {
      //   console.log('选中指令数据', record)
      //   this.nodeSettingForm.setFieldsValue({directiveCode: record.directiveCode})
      //   this.currSelected.sysCode = record.sysCode
      // },
      // getFlowGraphData(node) {
      //   this.graphDatasource.nodes.push({
      //     id: node.id,
      //     text: node.flowNodeName
      //   })
      //   if (node.children.length > 0) {
      //     for (let a = 0; a < node.children.length; a++) {
      //       let temp = node.children[a]
      //       this.graphDatasource.edges.push({
      //         source: node.id,
      //         target: temp.id
      //       })
      //       this.getFlowGraphData(temp)
      //     }
      //   }
      // },
      //---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------
      // expandAll () {
      //   this.iExpandedKeys = this.allTreeKeys
      // },
      // closeAll () {
      //   this.iExpandedKeys = []
      // },
      // checkALL () {
      //   this.checkStriccheckStrictlytly = false
      //   this.checkedKeys = this.allTreeKeys
      // },
      // cancelCheckALL () {
      //   //this.checkedKeys = this.defaultCheckedKeys
      //   this.checkedKeys = []
      // },
      // switchCheckStrictly (v) {
      //   if(v==1){
      //     this.checkStrictly = false
      //   }else if(v==2){
      //     this.checkStrictly = true
      //   }
      // },
      // getAllKeys(node) {
      //   // console.log('node',node);
      //   this.allTreeKeys.push(node.key)
      //   if (node.children && node.children.length > 0) {
      //     for (let a = 0; a < node.children.length; a++) {
      //       this.getAllKeys(node.children[a])
      //     }
      //   }
      // }
      //---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------
    },
    created() {
      this.currFlowId = this.$route.params.id
      this.currFlowName = this.$route.params.name
      // this.loadTree()
    },
  }
</script>
<style scoped>
  .span1 {
    display: inline-block;
    width: 230px;
    height: 200px;
  }

  .span2 {
    display: inline-block;
    width: 560px;
    height: 200px;
  }

  .ant-card-body .table-operator {
    margin: 15px;
  }

  .anty-form-btn {
    width: 100%;
    text-align: center;
  }

  .anty-form-btn button {
    margin: 0 5px;
  }

  .anty-node-layout .ant-layout-header {
    padding-right: 0;
  }

  .header {
    padding: 0 8px;
  }

  .header button {
    margin: 0 3px;
  }

  .ant-modal-cust-warp {
    height: 100%;
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto;
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden;
  }

  #app .desktop {
    height: auto !important;
  }

  /** Button按钮间距 */
  .ant-btn {
    margin-left: 3px;
  }

  .drawer-bootom-button {
    /*position: absolute;*/
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: left;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>